<!--
 * @Author: tlp
 * @Date: 2021-08-24 16:08:49
 * @LastEditors: tlp
 * @Descripttion: 
 * @LastEditTime: 2021-08-24 16:56:03
 * @FilePath: \3DViewer\src\components\common\Tooltip.vue
-->
<template>
  <!-- :disabled="disabledTip" -->
  <el-tooltip ref="tooltip"
              :content="text"
              :disabled="!tooltipFlag"
              :placement="placement"
              class="tooltip"
              popper-class="selfttooltip">
    <span :class="className"
          @mouseenter="visibilityChange($event)">{{ text }}</span>
  </el-tooltip>
</template>

<script>
export default {
  name: 'EllipsisTooltip',
  props: {
    text: { type: String, default: '' }, // 字符内容
    placement: { type: String, default: 'top-start' },
    className: { type: String, default: 'text' } // class
  },
  data () {
    return {
      disabledTip: false,
      tooltipFlag: true
    }
  },
  methods: {
    // tooltip的可控
    visibilityChange (event) {
      const ev = event.target
      const ev_width = ev.offsetWidth // 文本的实际宽度
      // console.log(this.$refs.tooltip.parentNode)
      const content_width = this.$refs.tooltip.$el.parentNode.clientWidth // 文本容器宽度
      // console.log('content_width', content_width, 'ev_width', ev_width)
      // console.log(content_width > ev_width)
      if (content_width < ev_width) {
        // 实际内容宽度 > 文本宽度 =》内容溢出
        this.tooltipFlag = true // NameIsIncludeWord ? true : !!false
      } else {
        // 否则为不溢出
        this.tooltipFlag = false
      }
      // console.log('flag:', this.tooltipFlag)
    }
  }
}
</script>
<style lang="less">
&.selfttooltip {
  color: #fff;
  // width: 1153px;
  background: rgba(11, 19, 46, 0.8) !important;
  box-shadow: 0px 10px 22px 0px rgba(0, 0, 0, 0.5);
  border: solid 2px rgba(34, 127, 253, 1);
  padding: 22px 22px 25px 25px;
  font: 24px PingFang-SC-Bold;
  .el-popper__arrow::before {
    display: none;
  }
}
</style>